<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link href="lib/element-ui/index.css" rel="stylesheet"/>
    <link href="lib/font/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="css/goods.css" rel="stylesheet"/>
    <link href="css/public.css" rel="stylesheet"/>
</head>
<body>
<div id="app">
    <!-- header -->
    <el-menu :default-active="activeIndex" mode="horizontal">
        <el-menu-item id="logo" index="0">SSM入门</el-menu-item>
        <el-menu-item index="1"><a href="/toIndex.action">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="/toUser.action">用户管理</a></el-menu-item>
        <el-menu-item index="3"><a href="/toGoods.action">商品列表</a></el-menu-item>
        <el-menu-item id="author" index="4">
            <img class="el-tooltip" src="image/toxiang.jpg"/>
            <el-dropdown>
                <span class="el-dropdown-link" id="userName">jvtc<i
                        class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><a href="/toIndex.action">首页</a></el-dropdown-item>
                    <el-dropdown-item divided><a href="/user/logout.action">退出</a></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-menu-item>
    </el-menu>

    <div id="main">
        <el-col>
            <el-card shadow="hover">
                <!-- 搜索框 -->
                <el-form :inline="true" :model="searchEntity" class="demo-form-inline">
                    <el-form-item label="品牌">
                        <el-input placeholder="品牌" v-model="searchEntity.brand"></el-input>
                    </el-form-item>
                    <el-form-item label="标题">
                        <el-input placeholder="标题" v-model="searchEntity.title"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                @click="reloadList"
                                icon="el-icon-search"
                                type="primary">查询
                        </el-button>
                        <el-button
                                @click="searchEntity={}"
                                icon="el-icon-delete"
                                plain type="primary">清空
                        </el-button>
                    </el-form-item>
                </el-form>
                <!-- 功能按钮 -->
                <div>
                    <el-row>
                        <el-button @click="saveBtn" icon="el-icon-plus" type="primary">新增</el-button>
                        <el-button @click="search(pageConf.pageCode,pageConf.pageSize)"
                                   icon="el-icon-refresh">刷新
                        </el-button>
                    </el-row>

                </div>
                <!-- 列表 -->
                <el-table
                        :data="goods"
                        border
                        ref="goods"
                        style="width: 100%"
                        tooltip-effect="dark">
                    <el-table-column
                            align="center"
                            fixed
                            label="商品ID"
                            prop="id"
                            sortable
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="商品价格"
                            prop="price"
                            sortable
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="商品品牌"
                            prop="brand"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="商品标题"
                            prop="title"
                            show-overflow-tooltip
                            sortable
                            width="260">
                    </el-table-column>
                    <el-table-column align="center" label="商品图片" width="240">
                        <template scope="scope">
                            <img :src="scope.row.image" class="image" height="160" width="150"/>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    @click="handleDelete(scope.row)"
                                    size="mini"
                                    type="danger">删除
                            </el-button>
                            <el-button
                                    @click="handleEdit(scope.row)"
                                    size="mini">编辑
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                            :current-page="pageConf.pageCode"
                            :page-size="pageConf.pageSize"
                            :page-sizes="pageConf.pageOption"
                            :total="pageConf.totalPage"
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                            background
                            layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
                <br/>
                <br/>
            </el-card>
        </el-col>
    </div>

    <!-- footer -->
    <div class="footer">
        <el-container>
            <el-footer>
                <el-row :gutter="20">
                    <el-col :offset="10" :span="8">
                        <div class="footer-inner">
                            <div class="copyright">&copy; 2022 &mdash; <span itemprop="copyrightYear">2025</span>
                                <span class="with-love">
                                    <i class="fa fa-heartbeat"></i>
                                </span>
                                <span class="author" itemprop="copyrightHolder">fishdive</span>
                            </div>
                            <label>优雅的入门Spring SpringMVC Mybatis，实现简单的CRUD。页面使用Vue和ElementUI制作</label>
                        </div>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>


    <!-- 新增按钮的dialog -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="showSave" title="添加信息"
               width="30%">
        <el-form :model="editor" class="editor-form" label-width="100px" ref="editor"
                 status-icon>
            <el-form-item :rules="[{ required: true, message: '商品标题不能为空'}]" class="is-required" label="商品标题"
                          prop="title">
                <el-input auto-complete="off" placeholder="商品标题"
                          v-model="editor.title"></el-input>
            </el-form-item>
            <el-form-item :rules="[{ required: true, message: '商家价格不能为空'},{ type: 'number', message: '商品价格必须是数字'}]"
                          class="is-required" label="商品价格"
                          prop="price">
                <el-input auto-complete="off" placeholder="商品价格"
                          v-model.number="editor.price"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="picture">
                <el-upload
                        :before-upload="beforeUpload"
                        :file-list="fileList"
                        :limit="1"
                        :on-exceed="onExceed"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        action="/goods/upload.action"
                        list-type="picture-card"
                        multiple
                        name="picture"
                        ref="upload">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img :src="dialogImageUrl" alt="" width="100%">
                </el-dialog>
            </el-form-item>
            <el-form-item :rules="[{ required: true, message: '商品品牌不能为空'}]" class="is-required" label="商品品牌"
                          prop="brand">
                <el-input auto-complete="off" placeholder="商品品牌"
                          v-model="editor.brand"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
            <el-button @click="showSave = false">取 消</el-button>
            <el-button @click="save('editor')" type="primary">新增</el-button>
        </div>
    </el-dialog>

    <!-- 编辑按钮的dialog -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="showEditor" title="编辑信息"
               width="30%">
        <el-form :model="editor" class="editor-form" label-width="100px" ref="editor"
                 status-icon>
            <el-form-item :rules="[{ required: true, message: '商品标题不能为空'}]" class="is-required" label="商品标题"
                          prop="title">
                <el-input auto-complete="off" placeholder="商品标题"
                          v-model="editor.title"></el-input>
            </el-form-item>
            <el-form-item :rules="[{ required: true, message: '商家价格不能为空'},{ type: 'number', message: '商品价格必须是数字'}]"
                          class="is-required" label="商品价格"
                          prop="price">
                <el-input auto-complete="off" placeholder="商品价格"
                          v-model.number="editor.price"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="picture">
                <el-upload
                        :before-upload="beforeUpload"
                        :file-list="fileList"
                        :limit="1"
                        :on-exceed="onExceed"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        action="/upload"
                        list-type="picture-card"
                        multiple
                        name="picture"
                        ref="upload">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img :src="dialogImageUrl" alt="" width="100%">
                </el-dialog>
            </el-form-item>
            <el-form-item :rules="[{ required: true, message: '商品品牌不能为空'}]" class="is-required" label="商品品牌"
                          prop="brand">
                <el-input auto-complete="off" placeholder="商品品牌"
                          v-model="editor.brand"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
            <el-button @click="showEditor = false">取 消</el-button>
            <el-button @click="sureEdit('editor')" type="primary">修改</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script src="lib/vue/vue.js" type="text/javascript"></script>
<script src="lib/element-ui/index.js" type="text/javascript"></script>
<script src="lib/vue/vue-resource.js" type="text/javascript"></script>
<script src="lib/vue/vuex.min.js" type="text/javascript"></script>
<script src="lib/js/axios-0.18.0.js" type="text/javascript"></script>
<script src="js/goods.js" type="text/javascript"></script>
</html>